<template>
	<view class="forgot-container">
		<!-- 顶部返回 -->
		<view class="nav-bar">
			<view class="back-btn" @click="goBack">
				<uni-icons type="arrow-left" size="24" color="#2c3e50"></uni-icons>
			</view>
			<text class="nav-title">找回密码</text>
		</view>

		<!-- 步骤指示器 -->
		<view class="steps">
			<view class="step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
				<view class="step-number">1</view>
				<text class="step-text">验证手机</text>
			</view>
			<view class="step-line" :class="{ active: currentStep > 1 }"></view>
			<view class="step" :class="{ active: currentStep >= 2 }">
				<view class="step-number">2</view>
				<text class="step-text">重置密码</text>
			</view>
		</view>

		<!-- 第一步：手机验证 -->
		<view class="form-container" v-if="currentStep === 1">
			<view class="input-group">
				<view class="input-item">
					<uni-icons type="phone" size="20" color="#4b7bec"></uni-icons>
					<input type="number" v-model="form.phone" placeholder="请输入手机号" placeholder-class="placeholder" maxlength="11" />
				</view>
				<view class="input-item verification">
					<uni-icons type="safety" size="20" color="#4b7bec"></uni-icons>
					<input type="number" v-model="form.code" placeholder="请输入验证码" placeholder-class="placeholder" maxlength="6" />
					<view class="verify-btn" :class="{ disabled: counting }" @click="getVerifyCode">
						{{ counting ? `${countdown}s后重试` : '获取验证码' }}
					</view>
				</view>
			</view>

			<button class="next-button" @click="verifyPhone" :loading="loading">
				{{ loading ? '验证中...' : '下一步' }}
			</button>
		</view>

		<!-- 第二步：重置密码 -->
		<view class="form-container" v-if="currentStep === 2">
			<view class="input-group">
				<view class="input-item">
					<uni-icons type="locked" size="20" color="#4b7bec"></uni-icons>
					<input :type="showPassword ? 'text' : 'password'" v-model="form.password" placeholder="请输入新密码" placeholder-class="placeholder" />
					<view class="password-icon" @click="togglePasswordVisibility">
						<uni-icons :type="showPassword ? 'eye-filled' : 'eye-slash-filled'" size="20" color="#95afc0"></uni-icons>
					</view>
				</view>
				<view class="input-item">
					<uni-icons type="locked" size="20" color="#4b7bec"></uni-icons>
					<input :type="showPassword ? 'text' : 'password'" v-model="form.confirmPassword" placeholder="请确认新密码" placeholder-class="placeholder" />
				</view>
			</view>

			<view class="password-tips">
				<text>密码要求：</text>
				<text>· 长度8-20位</text>
				<text>· 包含字母和数字</text>
				<text>· 可包含特殊字符</text>
			</view>

			<button class="submit-button" @click="resetPassword" :loading="loading">
				{{ loading ? '提交中...' : '提交' }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentStep: 1,
				form: {
					phone: '',
					code: '',
					password: '',
					confirmPassword: ''
				},
				showPassword: false,
				loading: false,
				counting: false,
				countdown: 60
			}
		},
		methods: {
			goBack() {
				if (this.currentStep === 2) {
					this.currentStep = 1
					return
				}
				uni.navigateBack()
			},
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword
			},
			getVerifyCode() {
				if (this.counting) return
				
				if (!this.form.phone || !/^1\d{10}$/.test(this.form.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				this.counting = true
				this.countdown = 60
				
				// 发送验证码请求
				console.log('发送验证码到:', this.form.phone)
				
				const timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						clearInterval(timer)
						this.counting = false
					}
				}, 1000)
			},
			verifyPhone() {
				if (!this.form.phone || !this.form.code) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				
				this.loading = true
				// 模拟验证请求
				setTimeout(() => {
					this.loading = false
					this.currentStep = 2
				}, 1500)
			},
			resetPassword() {
				if (!this.form.password || !this.form.confirmPassword) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				
				if (this.form.password !== this.form.confirmPassword) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					})
					return
				}
				
				if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,20}$/.test(this.form.password)) {
					uni.showToast({
						title: '密码不符合要求',
						icon: 'none'
					})
					return
				}
				
				this.loading = true
				// 模拟重置密码请求
				setTimeout(() => {
					this.loading = false
					uni.showToast({
						title: '密码重置成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						})
					}, 1500)
				}, 1500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.forgot-container {
		min-height: 100vh;
		padding: 0 40rpx;
		background: linear-gradient(to bottom, #f5f7fa, #ffffff);
	}

	.nav-bar {
		display: flex;
		align-items: center;
		height: 88rpx;
		margin-top: var(--status-bar-height);
		
		.back-btn {
			padding: 20rpx;
			margin-left: -20rpx;
		}
		
		.nav-title {
			flex: 1;
			text-align: center;
			font-size: 34rpx;
			font-weight: 600;
			color: #2c3e50;
			margin-right: 48rpx;
		}
	}

	.steps {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 60rpx 0;
		
		.step {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.step-number {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: #e0e0e0;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				margin-bottom: 16rpx;
			}
			
			.step-text {
				font-size: 26rpx;
				color: #7f8c8d;
			}
			
			&.active {
				.step-number {
					background: #4b7bec;
				}
				
				.step-text {
					color: #4b7bec;
				}
			}
			
			&.completed {
				.step-number {
					background: #26de81;
				}
			}
		}
		
		.step-line {
			width: 200rpx;
			height: 2rpx;
			background: #e0e0e0;
			margin: 0 40rpx;
			margin-bottom: 40rpx;
			
			&.active {
				background: #4b7bec;
			}
		}
	}

	.form-container {
		.input-group {
			background: #ffffff;
			border-radius: 28rpx;
			padding: 20rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
			margin-bottom: 30rpx;
		}

		.input-item {
			display: flex;
			align-items: center;
			padding: 16rpx 20rpx;
			border-bottom: 2rpx solid #f5f7fa;
			
			&:last-child {
				border-bottom: none;
			}
			
			&.verification {
				.verify-btn {
					font-size: 26rpx;
					color: #4b7bec;
					padding: 8rpx 20rpx;
					border: 2rpx solid #4b7bec;
					border-radius: 100rpx;
					
					&.disabled {
						color: #95afc0;
						border-color: #95afc0;
					}
				}
			}
			
			input {
				flex: 1;
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #2c3e50;
				height: 60rpx;
			}
			
			.password-icon {
				padding: 10rpx;
			}
		}

		.placeholder {
			color: #95afc0;
			font-size: 28rpx;
		}
	}

	.password-tips {
		padding: 30rpx;
		background: rgba(75, 123, 236, 0.1);
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		
		text {
			display: block;
			font-size: 26rpx;
			color: #4b7bec;
			line-height: 1.8;
		}
	}

	.next-button,
	.submit-button {
		background: linear-gradient(135deg, #4b7bec, #6c5ce7);
		color: #ffffff;
		border-radius: 100rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 40rpx;
		box-shadow: 0 10rpx 20rpx rgba(75, 123, 236, 0.3);
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 5rpx 10rpx rgba(75, 123, 236, 0.3);
		}
	}
</style> 